<template>
  <div>
    <common-head title="商品列表"/>
    <div class="wrap">
      <div class="list-head">
        <div
          :class="['price',{active:active.orderBy === 0}]"
          @click="byPrice"
        >
          <span>价格</span>
          <div :class="['angle','up',{
            active: active.orderBy === 0 && active.upDown === 1
          }]"></div>
          <div :class="['angle','down',{
            active: active.orderBy === 0 && active.upDown === 0
          }]"></div>
        </div>
        <div
          @click="bySale"
          :class="['sale',{active:active.orderBy === 1}]"
          >
          <span>销量</span>
          <div :class="['angle','up',{
            active: active.orderBy === 1 && active.upDown === 1
          }]"></div>
          <div :class="['angle','down',{
            active: active.orderBy === 1 && active.upDown === 0
          }]"></div>
        </div>
      </div>
      <!-- action结束 -->
      <!-- 商品主体 -->
      <div class="recommend">
        <div class="recommend-main">
          <div class="item"
            v-for="item in items"
            :key="item.id"
            @click="clickItem(item.id)"
            >
            <img :src="item.pic" alt="">
            <h5>{{item.name}}</h5>
            <div class="action">
              <span class="price">
                {{ item.minPrice | currency }}
              </span>
              <van-icon size="20" color="#f66" class="iconfont" class-prefix="icon" name="wuuiconxiangjifangda"></van-icon>
            </div>
          </div>
        </div>
      </div>
      <!-- /商品主体 -->
    </div>
  </div>
</template>

<script>
import CommonHead from '@components/CommonHead'
import { getItemLists } from '@api'
export default {
  data () {
    return {
      items: [],
      active: {
        orderBy: 0, // 0价格  1 销量
        upDown: 0 // 0 降序  1升序
      }
    }
  },
  created () {
    this.fetchItems()
  },
  methods: {
    byPrice () {
      // 点击按价格排序
      this.active.orderBy = 0
      if (this.active.upDown === 0) {
        this.active.upDown = 1
      } else {
        this.active.upDown = 0
      }
      this.fetchItems()
    },
    bySale () {
      this.active.orderBy = 1
      if (this.active.upDown === 0) {
        this.active.upDown = 1
      } else {
        this.active.upDown = 0
      }
      this.fetchItems()
    },
    fetchItems () {
      getItemLists({
        k: this.$route.query.word,
        orderBy: this.orderBy
      }).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.data
        }
      })
    },
    clickItem (id) {
      // 进入详情页
      this.$router.push({
        path: '/detail',
        query: {
          id
        }
      })
    }
  },
  computed: {
    orderBy () {
      let orderBy = 'priceUp'
      if (this.active.orderBy === 0 && this.active.upDown === 0) {
        orderBy = 'priceUp'
      } else if (this.active.orderBy === 0 && this.active.upDown === 1) {
        orderBy = 'priceDown'
      } else if (this.active.orderBy === 1 && this.active.upDown === 0) {
        orderBy = 'ordersUp'
      } else {
        orderBy = 'ordersDown'
      }
      return orderBy
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.list-head{
  line-height:40px;
  background: rgb(240, 236, 236);
  display: flex;
  font-size:14px;
  justify-content: space-around;
  .angle{
    width:0;
    height:0;
    border:6px solid transparent;
    &.up{
      border-bottom-color:#999;
    }
    &.down{
      border-top-color:#999;
    }
  }
  .price,.sale{
    position: relative;
    &.active{
      color:#f66;
    }
  }
  .angle{
    position: absolute;
    right:-15px;
  }
  .angle.up{
    top:8px;
    &.active{
      border-bottom-color:#f66;
    }
  }
  .angle.down{
    top:22px;
    &.active{
      border-top-color:#f66;
    }
  }
}

.recommend{
  .recommend-main{
    display: flex;
    flex-wrap: wrap;
    .item{
      width:50%;
      box-sizing: border-box;
      padding:0 8px;
      h5{
        line-height: 30px;
        font-size:14px;
        color:#333;
      }
      .action{
        display: flex;
        justify-content: space-between;
        .price{
          font-size:18px;
          color:#f66;
        }


      }
      img{
        width:100%;
      }
    }
  }
}
</style>
